<template>
  <div class="MiniLogin">
    <div id="gantt_here" style="margin-top: 10px" class="gantt-container"></div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, onMounted } from 'vue';
  import { gantt } from 'dhtmlx-gantt';
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
  let objs = reactive({
    asd1: '#f2e6c2',
    asd2: '#b5e09b',
    asd3: '#baefe2',
  });
  //初始化甘特图
  const initGantt = () => {
    var tasks = {
      data: [
        {
          id: 1,
          taskname: '汽油国6M15B',
          parent: 0,
          render: 'split',
          carNo: 'E301',
          text: 'MT试验ECU改写（FTRD）',
          cartype: 'TV7156NM',
          code: 'MZEA11L-GEFNZC',
          tyre: '195/65R15',
          start_date: '01-01-2024'
        },
        {
          id: 2,
          taskname: '汽油国6M15B',
          parent: 0,
          render: 'split',
          carNo: 'E302',
          text: '',
          cartype: 'TV7156NM',
          code: 'MZEA11L-GEFNZC',
          tyre: '195/65R15',
          start_date: '08-01-2024',
        },
        {
          id: 3,
          taskname: '汽油国6M15B',
          parent: 0,
          render: 'split',
          carNo: 'E303',
          code: 'MZEA11L-GEXNBC',
          text: '',
          cartype: 'TV7156N',
          tyre: '205/55R16',
          start_date: '08-01-2024',
        },
        {
          id: 4,
          text:"MT试验ECU改写（FTRD）",
          parent: 1,
          start_date:"08-01-2024",
          end_date:"09-01-2024",
        },
        {
          id: 5,
          text:"MT试验ECU改写（FTRD）",
          parent: 1,
          start_date:"11-01-2024",
          end_date:"12-01-2024",
        }
      ],
    };

    gantt.config.grid_width = 350;
    gantt.config.add_column = false; //添加符号
    gantt.config.autosize = true; //自适应尺寸
    gantt.config.autofit = true; // 表格列宽自适应
    gantt.config.autoscroll = true; // 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果
    gantt.config.drag_progress = false; //取消任务进度条进度拖动
    gantt.config.scale_height = 60;
    gantt.config.row_height = 60;
    gantt.config.bar_height = 34;
    gantt.config.fit_tasks = true; //自动延长时间刻度，以适应所有显示的任务
    gantt.config.auto_types = true; //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
    gantt.i18n.setLocale('cn'); //设置语言
    gantt.config.drag_project = true; //任务进度条整体拖拽
    gantt.config.drag_resize = true;
    //时间栏配置
    gantt.config.scales = [
      { unit: 'month', step: 1, format: '%m月' },
      { unit: 'day', step: 1, format: '%d' },
    ];
    //左侧列表配置
    gantt.config.columns = [
      { name: 'taskname', label: '式样', align: 'center',  width: 140 },
      {
        name: 'carNo',
        label: '车号',
        align: 'center',
        width: 80,
        // template: function (task) {
        //   let obj = {
        //     color: task.tsakrank === 0 ? '#ff2b00' : task.tsakrank === 1 ? '#ffab00' : '#409eff',
        //     icon: task.tsakrank === 0 ? 'icon-youxianjiP0' : task.tsakrank === 1 ? 'icon-youxianjiP1' : 'icon-youxianjiP2',
        //   };
        //   return `<div class="jindu" style="color:${obj.color};"><i style="font-size:24px;" class="iconfont ${obj.icon}"></i></div>`;
        // },
      },
      {
        name: 'cartype',
        label: '车辆型号',
        align: 'center',
        width: 100,
        // template: function (task) {
        //   let obj = {
        //     color: task.types === 1 ? '#f29d38' : task.types === 2 ? '#65c16f' : '#1890ff',
        //     icon: task.types === 1 ? 'icon-gongji' : task.types === 2 ? 'icon-kaiqifangyu' : 'icon-icon--mubiaoku',
        //     text: task.types === 1 ? '攻击' : task.types === 2 ? '防御' : '目标',
        //   };
        //   return `<div class="tasktype" style="color:${obj.color};font-size:14px;">
        //  <i class="iconfont ${obj.icon}"></i>
        //  <span style="margin-left:3px;"> ${obj.text}</span>
        //  </div>`;
        // },
      },
      {
        name: 'code',
        label: '车辆代号',
        align: 'center',
        width: 80,
        // template: function (task) {
        //   return `<div class="jindu" style="width:100%;height:30px;padding-left:10px;font-size:13px;color:black;"><span>${
        //     (task.progress * 100).toFixed(0) + '%'
        //   }</span></div>`;
        // },
      },
      {
        name: 'progress',
        label: '车辆信息',
        align: 'center',
        width: 80,
        // template: function (task) {
        //   return `<div class="jindu" style="width:100%;height:30px;padding-left:10px;font-size:13px;color:black;"><span>${
        //     (task.progress * 100).toFixed(0) + '%'
        //   }</span></div>`;
        // },
      },
      {
        name: 'tyre',
        label: '轮胎规格',
        align: 'center',
        width: 80,
        // template: function (task) {
        //   return `<div class="jindu" style="width:100%;height:30px;padding-left:10px;font-size:13px;color:black;"><span>${
        //     (task.progress * 100).toFixed(0) + '%'
        //   }</span></div>`;
        // },
      },
    ];
    //鼠标移入弹框
    gantt.templates.tooltip_text = function (start, end, task) {
    	return `
    	<div style="width: 200px;height: 200px;">
                <p>任务名称：这是一个任务</p>
                <p>任务策划：张三</p>
    			<p>当前状态：进行中</p>
                <p>任务类别：攻击</p>
                <p>开始时间：2020-12-11</p>
                <p>结束时间：2021-04-13</p>
        </div>
    	`
    };
    //更改父项图标
    // gantt.templates.grid_folder = (item) => {
    //   return '';
    // };
    // gantt.plugins({
    //   marker: true,
    // });
    // var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
    // var today = new Date();
    // gantt.addMarker({
    //   start_date: today,
    //   css: 'today',
    //   text: '今天',
    //   title: '今天: ' + date_to_str(today),
    // });
    //更改子项图标
    // gantt.templates.grid_file = (item) => {
    //   return '';
    // };
    //任务条显示内容
    gantt.templates.task_text = function (start, end, task) {
      return `
     <div style="color:#454545;font-size:14px;font-weight:700;">${task.text}</div>
   `;
    };
    //任务条左侧配置
    // gantt.templates.leftside_text = function (start, end, task) {
    // 	return `<div class="jindu" style="width:100%;height:30px;background-color:#e6f4ff;padding-left:10px;font-size:13px;color:#629eff;"><span>当前进度${(task.progress * 100).toFixed(0) + "%"}</span></div>`;
    // };
    //展开树图标
    // gantt.templates.grid_open = function (item) {
    //   return `<i style="font-size:14px;background:none; color:#1890ff; padding-left:10px;" class="gantt_tree_icon gantt_${
    //     item.$open ? 'close' : 'open'
    //   }  iconfont  ${item.$open ? 'icon-zhankaishousuo' : 'icon-zhankaishousuo1'}"></i>`;
    // };

    gantt.init('gantt_here'); //初始化
    gantt.parse(tasks); //填充数据

    //双击事件
    gantt.attachEvent('onTaskDblClick', function (id, e) {
      console.log(e);

      // 在这里编写处理双击事件的代码
      console.log('双击了任务：' + id);
    });
  };

  onMounted(() => {
    initGantt();
  });
</script>
<style scoped>
  /* @import url(); 引入css类 */
</style>
